@import "assets/scss/varibles";
@import "assets/scss/root";
@import "assets/scss/mygrid.scss";

p:first-child{
    color: var(--blue);
}
p:nth-child(2){
    color: var(--purple);
}
p:nth-child(3){
    color: var(--green)
}
p:nth-child(4){
    font-size: env(--font-size);
    padding:env(--branding-padding);
}
div{
    color: var(--orange);
}

 $n:breakpoint-next(sm);

 @function last-index($list, $value) {
    $index: null;
  
    @for $i from 1 through length($list) {
        // @debug length($list);
        // @debug nth($list,4);
      @if nth($list, $i) == $value {
        $index: $i;
        // @debug $index;
      }
    }
  
    @return $index;
}
$list: a, b, c, d z, e, a, f;
$first-index: index($list, a); // 1
$last-index: last-index($list, a); // 6


// @debug  $last-index;